/**
 * Created by Administrator on 2017/3/15.
 */
var Input = require('../../../../src/libs/input');
var Button = require('../../../../src/libs/button');
var FormItem = require('../../../../src/libs/form-item');
var HyperLink = require('../../../../src/libs/hyperlink');
var GetCode = require('../../../../src/libs/get-code');

var Step1 = React.createClass({
    getDefaultProps:function() {
        return{
            //pagedm:this.props.pagedm
        }
    },
    getInitialState:function(){
        return{
            phone:PageDM.phone,//手机号
            imgCode:PageDM.imgCode,//图形验证码
            imgBtn:PageDM.imgBtn,//验证码图片
            msgCode:PageDM.msgCode,//短信验证码
            msgBtn:PageDM.msgBtn,//获取短信按钮
            btnNext1:PageDM.btnNext1//下一步按钮
        }
    },
    componentDidMount:function(){
        var _this = this;
        var PageDM = window.PageDM;
        UEventHub.on(PageDM.imgBtn.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            var _node = this.refs.imgcode;
            _node.setAttribute('src',PageDM.imgBtn.getValue());
        }.bind(this));

        //手机号码
        UEventHub.on(PageDM.phone.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            console.log(v)
            _this.setState({
                phone:{
                    value:v
                }
            })
        }.bind(this));

        UEventHub.on('getcode',function(v){
            if(v == PageDM.msgBtn){
                _this.refs.getCode.toCount();
            }
        }.bind(this));
    },
    render:function(){
        return(
            <div className="form-reg">
                <FormItem unValidate={this.state.phone.value ?true:false} label={<div><b>*</b>{this.state.phone.label}</div>} dmbind={this.state.phone.dmbind}>
                    {this.state.phone.value ?
                        <div>{this.state.phone.value}</div> :
                        <Input placeholder={this.state.phone.placeholder} dmbind={this.state.phone.dmbind}/>
                    }
                </FormItem>
                <FormItem label={<div><b>*</b>{this.state.imgCode.label}</div>} dmbind={this.state.imgCode.dmbind}>
                    <Input placeholder={this.state.imgCode.placeholder} className="ucs-input code" dmbind={this.state.imgCode.dmbind}/>
                    <HyperLink text={<img src={this.state.imgBtn.value} className="f-left img-code" ref="imgcode" style={{height:"40px"}}/>} onClick={this.state.imgBtn.onClick}/>
                </FormItem>
                <FormItem label={<div><b>*</b>{this.state.msgCode.label}</div>} dmbind={this.state.msgCode.dmbind}>
                    <Input placeholder={this.state.msgCode.placeholder} dmbind={this.state.msgCode.dmbind} className="ucs-input code"/>
                    <GetCode dmbind={PageDM.msgCode.dmbind} ref="getCode" count={this.state.msgBtn.count} text={this.state.msgBtn.text?this.state.msgBtn.text:"获取验证码"} onClick={this.state.msgBtn.onClick} onMouseDown={PageDM.msgBtn.onMouseDown} className="btn-code"/>
                </FormItem>
                <div className="form-group auto-height form-btn">
                    <label>&nbsp;</label>
                    <Button value="下一步" className="ucs-btn-confirm btn-width" onClick={this.state.btnNext1.onClick} onMouseDown={PageDM.btnNext1.onMouseDown} dmbind={PageDM.btnNext1.dmbind}/>
                </div>
            </div>
        )
    }
});
module.exports = Step1;